<template>
  <div class="bartendPerOrder">
    <div class="flex preBox" v-if="isOrderPre">
      <img :src="perUserInfo.avatar_image" class="userImg" alt="" />
      <div class="userDetail">
        <div class="userName">{{ perUserInfo.nickname }}</div>
        <div class="userMobile">{{ perUserInfo.mobile }}</div>
      </div>
    </div>
    <van-popup v-model="openPopup" @close="close" round :close-on-click-overlay="false" :style="{ width: '70vw' }" closeable>
      <div class="optBox">
        <div class="title">选择会员</div>
        <div class="opt" @click="userPopupShowOpen">
          <span>输入会员手机号</span>
        </div>
        <div class="opt" @click="scanCode">
          <span>扫会员码</span>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="userPopupShow" round :close-on-click-overlay="false">
      <div class="userBox">
        <div class="userTitle">选择会员</div>
        <div class="txt">会员手机号</div>
        <div class="userBox_inp">
          <input type="number" v-model="mobile" placeholder="请输入" @input="handleInput" />
        </div>
        <div class="txtUser" style="flex: 1;" v-if="userInfo">（id:{{ userInfo.uid }}）{{ userInfo.nickname }}</div>
        <div class="btn">
          <div class="btn_n" @click="userPopupShow = false">取消</div>
          <div class="btn_n" @click="btnConfirm">确认</div>
        </div>
      </div>
    </van-popup>
    <BarScan v-model="openScan" v-if="openScan" :show="openScan" ref="qrcode" @ok="getResult" @err="geterror"></BarScan>
  </div>
</template>
<script>
import { debounce } from "lodash";
import BarScan from "@/views/bodyHealthCheck/components/BarScan";
export default {
  props: {
    openPopup: {
      type: Boolean,
      default: false
    },
    isOrderPre: {
      type: Boolean,
      default: false
    },
    perUserInfo: {
      type: Object,
      default: () => {}
    }
  },
  components: { BarScan },
  data() {
    return {
      userPopupShow: false,
      mobile: "",
      userInfo: null,
      openScan: false
    };
  },
  created() {
    this.handleInput = debounce(this.searchMember, 300);
  },
  methods: {
    userPopupShowOpen() {
      this.userPopupShow = true;
      this.userInfo = null;
      this.mobile = "";
    },
    scanCode() {
      console.log("scanCode");
      if (this.fun.isWeiXin()) {
        // 微信环境扫码
        this.wxScanCode();
      } else {
        // H5扫码
        this.openScan = true;
      }
    },
    getResult(result) {
      console.log(result, "扫码结果");
      this.openScan = false;
      this.userPopupShow = false;
      this.$emit("confirm", { uid: result });
    },
    geterror(e) {
      this.openScan = false;
    },
    wxScanCode() {
      let that = this;
      wx.ready(function() {
        wx.scanQRCode({
          desc: "scanQRCode desc",
          needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            that.userPopupShow = false;
            that.$emit("confirm", { uid: res.resultStr });
          },
          error: function(err) {
            console.log(err);
            //轻提示
            that.$dialog.alert({
              message: "请使用微信浏览器"
            });
          }
        }); //wx.scanQRcode结束
      });
    },
    async searchMember() {
      if (this.mobile.length === 11) {
        // 手机号完整时才查询
        // 这里添加查询会员信息的API调用
        console.log("查询会员:", this.mobile);
        let { data, msg, result } = await $http.post("plugin.self-bartending.api.common.member.member-search", { keyword: this.mobile }, "");
        if (result) {
          this.userInfo = data;
        } else {
          this.$toast(msg);
        }
      }else{
        this.userInfo = null;
      }
    },
    btnConfirm() {
      if (!this.mobile) {
        this.$toast("请输入会员手机号");
        return;
      }
      if (!this.userInfo) {
        this.$toast("请选择输入正确的会员手机号");
        return;
      }
      this.userPopupShow = false;
      this.$emit("confirm", this.userInfo);
    },
    close() {
      this.$emit("close");
    }
  }
};
</script>
<style lang="scss" scoped>
.codeBox {
  width: 15.63rem;
  height: 14.31rem;
  background: #ffffff;
  border-radius: 0.63rem;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 9.31rem;
    height: 9.31rem;
  }
}
.iconBox {
  margin: 0 auto;
  margin-top: 1.59rem;
  width: 2rem;
  height: 2rem;
  .icon-adsystem_icon_cancle {
    color: #d6d6dc;
    font-size: 2rem;
  }
}
.userBox {
  width: 15.63rem;
  height: 11.88rem;
  background: #ffffff;
  border-radius: 0.63rem;
  padding: 1.03rem 0.75rem 0 0.75rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .userTitle {
    font-weight: bold;
    font-size: 1rem;
    line-height: 1rem;
    margin-bottom: 1.25rem;
  }
  .userBox_inp {
    border-radius: 0.5rem;
    padding: 0 0.5rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    border: 0.03rem solid #d6d6dc;
    box-sizing: border-box;
    input {
      border: none;
    }
  }
  .txtUser {
    margin-top: 0.38rem;
    text-align: left;
    font-size: 0.75rem;
    line-height: 0.8rem;
    color: #f15353;
  }
  .txt {
    font-size: 0.81rem;
    line-height: 0.85rem;
    margin-bottom: 0.47rem;
    text-align: left;
  }
  .btn {
    height: 2.78rem;
    border-top: 0.03rem solid #ececec;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn_n {
      flex: 1;
      font-size: 0.94rem;
      color: #fe5e56;
    }
    .btn_n:first-child {
      border-right: 0.03rem solid #ececec;
      color: #7e7e7e;
    }
  }
}
.preBox {
  padding: 0.75rem;
  background: #ffffff;
  border-radius: 0.5rem;
  .userImg {
    width: 3rem;
    height: 3rem;
    background: #f5f5f5;
    border-radius: 1.5rem;
    margin: 0;
    margin-right: 0.56rem;
  }
  .userDetail {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    .userName {
      font-weight: 500;
      font-size: 0.94rem;
    }
    .userMobile {
      font-size: 0.81rem;
      line-height: 0.85rem;
      color: #6e6e79;
      margin-top: 0.31rem;
    }
  }
  .iconBox_del {
    display: flex;
    align-items: center;
    .icon-appointment_delete {
      color: #999999;
      font-size: 1.3rem;
    }
  }
}
.bartendPerOrder {
  margin: 0.63rem 0.75rem;
  background: #fff;
  border-radius: 0.5rem;
  .optBox {
    padding: 0.75rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    .title {
      text-align: center;
      font-size: 1.2rem;
      font-weight: bold;
      margin: 0.2rem 0 0.9rem 0;
    }

    .opt {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 0.81rem;
      height: 4.06rem;
      background: #f5f5f5;
      border-radius: 0.5rem;
      margin-bottom: 0.5rem;
      padding: 1rem 1.5rem;
      // .iconfont {
      //   font-size: 1.2rem;
      //   margin-bottom: 0.5rem;
      // }
    }
  }
}
</style>
